<template>
    <view
        :class="[
            classes,
            colorClass,
            bgColorClass,
            box
                ? `solid${focus ? '-theme' : ''} margin-lr margin-tb-sm padding-sm`
                : `solid-bottom${focus ? '-theme' : ''} padding`,
            {
                round: round && box,
                radius: radius && box
            }
        ]"
        :style="[
            styles,
            {
                color: colorStyle,
                backgroundColor: bgColorStyle
            }
        ]"
        @click="handleClick"
        class="bar"
    >
        <view :class="[{ 'flex align-center': box || !col }]">
            <view
                class="flex align-center"
                :class="[{ 'margin-bottom-xs': !box && col }]"
                :style="{ width: box || !col ? getSize(titleWidth).styles : '' }"
            >
                <uxt-icon
                    :animation="icon2.animation"
                    :bg-color="icon2.bgColor"
                    :color="icon2.color"
                    :hollow="icon2.hollow"
                    :radius="icon2.radius"
                    :round="icon2.round"
                    :size="icon2.size"
                    :type="icon2.type"
                    v-if="icon2"
                ></uxt-icon>
                <slot name="left"></slot>
                {{ title }}
            </view>
            <view v-if="desc && !box && col" class="text-grey text-sm margin-bottom-xs">
                {{ desc }}
            </view>
            <view class="flex-sub flex justify-end align-center">
                {{ content }}
                <slot name="right"></slot>
                <uxt-icon
                    classes="margin-left-sm"
                    type="angle-right"
                    size="xl"
                    v-if="url || arrow"
                ></uxt-icon>
            </view>
        </view>
        <view v-if="desc && (box || !col)" class="text-grey text-sm margin-top-xs">{{ desc }}</view>
    </view>
</template>

<script>
import baseMixin from '../mixins/base.js'
import barMixin from '../mixins/bar.js'
import rrMixin from '../mixins/rr.js'
import uxtIcon from './uxt-icon.vue'

export default {
    name: 'uxt-bar',
    mixins: [baseMixin, barMixin, rrMixin],
    components: {
        uxtIcon
    },
    props: {
        // 聚焦状态
        focus: {
            type: Boolean,
            default: false
        },
        // 点击跳转url
        url: {
            type: String
        },
        bgColor: {
            default: 'white'
        }
    },
    computed: {
        icon2() {
            if (!this.icon) {
                return null
            }
            if (typeof this.icon === 'string') {
                return {
                    type: this.icon
                }
            }
            return this.icon
        }
    },
    methods: {
        handleClick(e) {
            this.url &&
                uni.navigateTo({
                    url: this.url
                })
            this.$emit('click', { detail: e.currentTarget.dataset })
        }
    }
}
</script>

<style lang="scss" scoped></style>
